<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../../logo.svg" />
    <title>事件修饰符</title>
    <style>
      #root div {
        margin-top: 3rem;
        margin-bottom: 3rem;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div>
        <a href="https://google.com" @click.prevent="showInfo"
          >阻止默认事件(prevent)</a
        >
      </div>

      <div @click="showInfo" style="background: skyblue; min-height: 4rem">
        <button @click.stop="showInfo">阻止事件冒泡(stop)</button>
      </div>

      <div style="background: gray; min-height: 4rem">
        <button @click.once="showInfo">事件只触发一次(once)</button>
      </div>

      <div
        style="background: cyan; padding: 1rem"
        @click.capture="showMsg('div1')"
      >
        使用事件的捕获模式(capture),div1
        <div style="padding: 1rem; background: orange" @click="showMsg('div2')">
          使用事件的捕获模式(capture),div2
        </div>
      </div>

      <div @click.self="showInfo" style="background: skyblue; min-height: 4rem">
        <button @click="showInfo">当前操作的元素才触发事件(self)</button>
      </div>
    </div>

    <script src="../../vue.js"></script>
    <script>
      Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。

      new Vue({
        el: "#root",
        data: {},
        methods: {
          showInfo(e) {
            // e.preventDefault();
            alert("你好呀");
          },
          showMsg(msg) {
            alert(msg);
          },
        },
      });
    </script>
  </body>
</html>
